<template>
  <div class="common-card">
    <div class="card-title">{{ title }}</div>
    <div class="card-value">{{ value }}</div>
    <div class="card-chart">
      <slot>
        <!-- 默认插槽 -->
      </slot>
    </div>
    <div class="card-line"></div>
    <div class="card-footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "CommonCard",
  props: {
    title: {
      type: String,
      default: "",
    },
    value: {
      // 限制了传入参数的类型,如果不一致,那么控制台会报错,应该got一个string,但是确实一个意外的number
      type: String,
      default: 0,
    },
  },
}
</script>

<style lang="scss">
.common-card {
  .card-title {
    font-size: 12px;
    color: #666;
  }
  .card-value {
    font-size: 25px;
    margin: 5px 0;
    letter-spacing: 1px;
  }
  .card-chart {
    // 在响应式的布局当中，高度可以设置固定值
    height: 50px;
  }
  .card-line {
    border: 1px solid rgb(232, 218, 218);
    margin-top: 10px;
  }
  .card-footer {
    font-size: 13px;
    margin-top: 5px;
  }
  .bro {
    // display: block;
    font-size: 10px;
    margin-left: 8px;
    font-weight: 600;
  }
}
</style>
